<template>
  <div id="user">
    <div class="back">
      <div class="back-content" @click="$router.back()">
        <a-icon type="left" />
        <span>返回</span>
      </div>
    </div>

    <div class="user-wrap experience">
      <a-row style="margin-top: 20px">
        <a-col :span="24">
          <a-card title="我的技能">
            <a slot="extra" href="#" @click="expModalShow = true"> 创建 </a>
            <div class="experience-list">
              <a-row>
                <a-col :span="12" v-for="(expItem, expIndex) in expList" :key="expItem + expIndex">
                  <div class="experience-item">
                    <div class="name"><span>项目名称：</span> {{ expItem.title }}</div>
                    <div class="time"><span>时间：</span> {{ expItem.time }}</div>
                    <div class="skill">
                      <span>技能：</span>
                      <div>
                        <a-tag color="orange" class="skill-tag" v-for="(skill, index) in expItem.use_skill" :key="skill + index">{{ skill }}</a-tag>
                      </div>
                    </div>
                    <div class="responsible">
                      <span>负责工作：</span>
                      <ul>
                        <li v-for="(job, index) in expItem.res_job" :key="job + index">{{ job }}</li>
                      </ul>
                    </div>
                    <div class="update-btn">
                      <a-button @click="updateExp(expIndex)" type="primary"> 更新 </a-button>
                      <a-button @click="switchExp(expIndex)" type="danger">
                        <span v-if="expItem.hidden === '0'">删除</span>
                        <span v-if="expItem.hidden === '1'">恢复</span>
                      </a-button>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <a-modal title="创建经历" :visible="expModalShow" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="expModalShow = false" width="700px">
      <a-form-model :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }" labelAlign="left">
        <a-form-model-item label="项目名称">
          <a-input v-model="form.title" />
        </a-form-model-item>
        <a-form-model-item label="时间">
          <a-range-picker :value="form.date" @change="onChange" :placeholder="['开始日期', '结束日期']" />
        </a-form-model-item>
        <a-form-model-item label="技能">
          <a-input v-model="form.skill" placeholder="请输入您会的技能" style="width: 80%; margin-right: 8px" />
          <a-button type="primary" shape="circle" @click="onAddSkill"> + </a-button>
          <div>
            <a-tag v-for="(item, index) in form.skillList" :key="'update' + item + index" closable @close="onDeleteSkill(index)" color="#108ee9">
              {{ item }}
            </a-tag>
          </div>
        </a-form-model-item>
        <a-form-model-item label="负责工作">
          <a-input v-model="form.resJob" placeholder="请输入您负责的工作" style="width: 80%; margin-right: 8px" />
          <a-button type="primary" shape="circle" @click="onAddResJob"> + </a-button>
          <div v-if="form.resJobList.length">
            <div v-for="(job, index) in form.resJobList" :key="'updatejob' + index">
              <a-input v-model="form.resJobList[index]" style="width: 80%; margin-right: 8px" />
              <a-button type="primary" shape="circle" @click="onDeleteResJob(index)"> × </a-button>
            </div>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      span: 6, //左右两边的span
      expModalShow: false,
      form: {
        title: '',
        skill: '',
        resJob: '',
        skillList: [],
        resJobList: [],
        date: [],
        id: ''
      },
      expList: []
    }
  },

  created() {
    this.getExp()
  },

  methods: {
    // 获取数据
    getExp() {
      this.$api.getExp({ type: 'all' }).then((res) => {
        if (res.code === 1) {
          this.expList = res.data
        }
      })
    },

    updateExp(index) {
      const exp = this.expList[index]
      this.form.title = exp.title
      this.form.skill = ''
      this.form.resJob = ''
      this.form.skillList = exp.use_skill
      this.form.resJobList = exp.res_job
      this.form.date = exp.time.split(' ~ ')
      this.form.id = exp.id

      this.expModalShow = true
    },

    switchExp(index) {
      const exp = this.expList[index]
      this.$api.switchExp(exp.id).then((res) => {
        if (res.code === 1) {
          this.$message.success(res.message)
          this.getExp()
        }
      })
    },

    // 创建/修改接口
    handleOk() {
      let data = {
        time: this.form.date.join(' ~ '),
        title: this.form.title,
        res_job: this.form.resJobList,
        use_skill: this.form.skillList
      }
      if (this.form.id) {
        data.id = this.form.id
        data.type = 'update'
      }

      this.$api.setExp(data).then((res) => {
        if (res.code === 1) {
          this.$message.success(res.message)
          this.getExp()
          this.clear()
        }
      })
    },

    clear() {
      this.form.title = ''
      this.form.skill = ''
      this.form.resJob = ''
      this.form.skillList = []
      this.form.resJobList = []
      this.form.date = ''
      this.form.id = ''
    },

    // 修改日期接口
    onChange(data, dateString) {
      this.form.date = dateString
    },

    // 技能添加接口
    onAddSkill() {
      if (!this.form.skill) {
        return this.$message.error('技能不能为空')
      }
      if (this.form.skillList.indexOf(this.form.skill) === -1) {
        this.form.skillList.push(this.form.skill)
      } else {
        this.$message.error('已存在技能！！')
      }
      this.form.skill = ''
    },

    // 负责工作删除
    onDeleteSkill(index) {
      this.form.skillList.splice(index, 1)
    },

    // 负责工作
    onAddResJob() {
      if (this.form.resJobList.indexOf(this.form.resJob) === -1) {
        this.form.resJobList.push(this.form.resJob)
      } else {
        this.$message.error('已存在技能！！')
      }
      this.form.resJob = ''
    },

    // 负责工作删除
    onDeleteResJob(index) {
      this.form.resJobList.splice(index, 1)
    }
  }
}
</script>
<style lang="less" scoped>
#user {
  .user-wrap {
    .upload-avatar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .avatar-uploader {
      width: auto;
    }
  }

  .experience {
    .ant-col-12 {
      padding: 10px;
    }

    .update-btn {
      display: flex;
      margin-top: 20px;
      width: 100%;
      .ant-btn {
        width: 50%;
        margin-right: 20px;
      }
    }

    .skill {
      display: flex;

      .skill-tag {
        margin-right: 10px;
      }
    }

    .experience-list {
      flex: 1;
      padding-bottom: 10px;
    }

    .experience-item {
      padding: 10px;
      box-shadow: 0 0 5px #ccc;
      margin-bottom: 10px;
      line-height: 2;

      > div > span {
        display: inline-block;
        width: 80px;
      }
    }

    .responsible {
      flex: 1;
    }
  }
}
</style>